<template>
  <div class="app-login">
    <div class="login-box">
      <h1>智城精治综合管理平台</h1>
      <el-form class="ruleForm-wrap" ref="loginFormRef" :model="loginForm" :rules="loginRules" status-icon label-width="0px">
        <el-form-item label prop="username">
          <el-input class="el-input-inner" v-model="loginForm.username" placeholder="用户名" maxlength="24"></el-input>
          <span class="show-icon iconfont icon-people"></span>
        </el-form-item>
        <el-form-item label prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="密码" maxlength="24"></el-input>
          <span class="show-icon iconfont icon-lock"></span>
        </el-form-item>
        <el-form-item label prop="vcode">
          <el-input v-model="loginForm.vcode" class="verify-code-input" placeholder="验证码" maxlength="4"></el-input>
          <span class="show-icon iconfont icon-check-circle"></span>
          <div class="code-img">
            <img @click="refreshIdentify" v-if="loginForm.identifyUrl" :src="loginForm.identifyUrl" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" class="login-btn" type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="beian">沪ICP备19006540号-2</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { loginForm, loginFormRef, loginRules, refreshIdentify, submitForm, loading } from '@/hooks/login'

export default defineComponent({
  name: 'Login',
  setup () {
    onMounted(() => {
      refreshIdentify()
    })

    return {
      loginFormRef,
      loginForm,
      loginRules,
      refreshIdentify,
      submitForm,
      loading
    }
  }
})
</script>
<style lang="scss" scoped>
@import './index.scss'
</style>
